<template>
    <div class="infoBox">
        <el-form label-position="right" inline class="infoForm">
          <div class="infoTop over" >
              <!-- <el-form-item style="margin-left: 1rem;" label="启用状态:" :label-width="formLabelWidth2">
              	<span :class="equipInfo.equip_state==1?'yes':'stopUse'"></span>
              </el-form-item> -->
              <el-form-item v-if="equipInfo.is_on==1 || isOn==1" style="margin-left:1rem;" label="运行状态:" :label-width="formLabelWidth2">
              	<span v-if="equipInfo.is_alarm==0" class="onlineState"></span><i v-if="equipInfo.is_alarm==1" class="el-icon-bell alarm_on"></i>
              </el-form-item>
              <el-form-item v-else label="运行状态:" style="margin-left:1rem;" :label-width="formLabelWidth2">
              	<span class="offlineState"></span>
              </el-form-item>
              <el-form-item v-if="deviceData.version==3 && equipInfo.is_on==1 && equipInfo.network_way<3" style="margin-left: 1rem;" label="信号强度:" :label-width="formLabelWidth2">
              	<!-- <span :class="equipInfo.equip_state==1?'yes':'stopUse'"></span> -->
                <img v-if="equipInfo.signal>=1 && equipInfo.signal<=7" src="../../static/signalGreenOne.png" class="singalIcon"/>
                <img v-else-if="equipInfo.signal>=8 && equipInfo.signal<=14" src="../../static/signalGreenTwo.png" class="singalIcon"/>
                <img v-else-if="equipInfo.signal>=15 && equipInfo.signal<=21" src="../../static/signalGreenThree.png" class="singalIcon"/>
                <img v-else-if="equipInfo.signal>=22" src="../../static/signalGreenFour.png" class="singalIcon"/>
                <img v-else src="../../static/signalGreenZero.png" class="singalIcon"/>
              </el-form-item>
              <el-form-item v-else-if="deviceData.version==4 && equipInfo.is_on==1 && equipInfo.network_way<3" style="margin-left: 1rem;" label="信号强度:" :label-width="formLabelWidth2">
              	<!-- <span :class="equipInfo.equip_state==1?'yes':'stopUse'"></span> -->
                <img v-if="equipInfo.signal>=-113 && equipInfo.signal<=-99" src="../../static/signalGreenOne.png" class="singalIcon"/>
                <img v-else-if="equipInfo.signal>=-98 && equipInfo.signal<=-84" src="../../static/signalGreenTwo.png" class="singalIcon"/>
                <img v-else-if="equipInfo.signal>=-83 && equipInfo.signal<=-69" src="../../static/signalGreenThree.png" class="singalIcon"/>
                <img v-else-if="equipInfo.signal>=-68 && equipInfo.signal<=-51" src="../../static/signalGreenFour.png" class="singalIcon"/>
                <img v-else src="../../static/signalGreenZero.png" class="singalIcon"/>
              </el-form-item>
              <el-form-item  style="position:absolute;left:calc(58% + 1rem);padding-right: 0.1rem;"  label="" :label-width="formLabelWidth2">
              	<img class="locationIcon" src="../../static/local.png"/><span  :title="equipInfo.geo_name" class="over" style="display:inline-block;width:calc(42vw - 2.2rem);vertical-align: top;margin-top: 0.1rem;">{{ equipInfo.geo_name }}</span>
              </el-form-item>
          </div>
        	<div style="min-width:22%;float:left;text-align:left;margin-top: 0.3rem;padding-left:1rem;">
        		<el-form-item label="设备名称:" :label-width="formLabelWidth2">
        			<span>{{ equipInfo.equip_name }}</span>
        		</el-form-item><br>
        		<el-form-item label="设备编码:" :label-width="formLabelWidth2">
        			<span>{{ equipInfo.equip_code }}</span>
        		</el-form-item><br>
        		<el-form-item label="IMEI:" :label-width="formLabelWidth2">
        			<span>{{ equipInfo.imei_code || '未知' }}</span>
        		</el-form-item><br>
        		<el-form-item label="ICCID:" :label-width="formLabelWidth2">
        			<span>{{ equipInfo.ccid_code || '未知' }}</span>
        		</el-form-item>
        	</div>
        	<div style="min-width:18%;float:left;text-align:left;margin-left:0.1rem;margin-top: 0.3rem;">
        		<el-form-item label="所属项目:" :label-width="formLabelWidth2">
        			<span>{{ equipInfo.product_name }}</span>
        		</el-form-item><br>
            <el-form-item label="项目KEY:" :label-width="formLabelWidth2">
            	<span>{{ equipInfo.product_key }}</span>
            </el-form-item><br>
            <el-form-item label="运行模式:" :label-width="formLabelWidth2">
            	<span>{{ equipInfo.run_mode==1?'边缘采集':'透传' }}</span>
            </el-form-item><br>
            <el-form-item label="启用状态:" :label-width="formLabelWidth2">
            	<span>{{ equipInfo.equip_state==1?'启用':'禁用' }}</span>
            </el-form-item>
        	</div>
        	<div style="min-width:18%;float:left;text-align:left;margin-left:0.1rem;margin-top: 0.3rem;">
        		<!-- <el-form-item label="运行模式:" :label-width="formLabelWidth2">
        			<span>{{ props.row.run_mode | runMode}}</span>
        		</el-form-item><br> -->
            <el-form-item label="联网方式:" :label-width="formLabelWidth2">
            	<span>{{ equipInfo.network_way | netWay}}</span>
            </el-form-item><br>
        		<el-form-item label="应用场景:" :label-width="formLabelWidth2">
        			<span>{{ equipInfo.app_scene | appSceneToWord}}</span>
        		</el-form-item><br>
        		<el-form-item label="固件版本:" :label-width="formLabelWidth2">
        			<span>{{ equipInfo.firmware_version?'V'+equipInfo.firmware_version:'未知'}}</span>
        		</el-form-item><br>
        		<el-form-item label="设备型号:" :label-width="formLabelWidth2">
        			<span>{{ equipInfo.equip_model?equipInfo.equip_model:'' }}</span>
        		</el-form-item>
        		<!-- <el-form-item label="位置:" :label-width="formLabelWidth">
        			<span>{{ props.row.geo_name }}</span>
        		</el-form-item> -->
        	</div>
        	<div style="min-width:22%;float:left;text-align:left;margin-left:0.1rem;margin-top: 0.3rem;">

        		<!-- <el-form-item label="位置:" :label-width="formLabelWidth">
        			<span>{{ equipInfo.geo_name }}</span>
        		</el-form-item><br> -->
        		<el-form-item label="添加时间:" :label-width="formLabelWidth">
        			<span>{{ equipInfo.add_time }}</span>
        		</el-form-item><br>
        		<el-form-item label="最后上线时间:" :label-width="formLabelWidth">
        			<span>{{ equipInfo.last_con_time }}</span>
        		</el-form-item><br>
        		<el-form-item label="最后上报时间:" :label-width="formLabelWidth">
        			<span>{{ equipInfo.last_data_time }}</span>
        		</el-form-item><br>
            <el-form-item label="最后离线时间:" :label-width="formLabelWidth">
            	<span>{{ equipInfo.last_discon_time }}</span>
            </el-form-item>
        	</div>
        </el-form>
    </div>
</template>
<script>
    export default {
        name: 'EquipInfo',
        data() {
            return {
              formLabelWidth2: '100px',
              formLabelWidth: '160px',
              equipInfo:{

               }
            }
        },
        props: ['deviceData','isOn'],
        created(){
           this.getEquipInfo(this.deviceData.id);
        },
        methods:{
          getEquipInfo(id){
             this.$http({
               method: 'post',
               url: 'api/equip/info',
               data: {
                 "id": id
               }
             }).then(res => {
               if (res && res.data.result == "success") {
                 this.equipInfo = res.data.data;
                 //this.equipInfo.signal=-60;
              }
             }).catch(error => {
               console.log(error);
             });
          }

        }
    }
</script>
<style lang="" scoped>
    .infoBox{
      width:100%;
    }

    .infoForm{
      /* margin-top:0.5rem; */
      line-height:0.6rem;
      /* padding-left:0.5rem; */

    }

    .infoForm /deep/ .el-form-item{
       height:0.6rem;
       line-height:0.6rem;
       margin:0 10px 10px 0;
    }

    .infoForm /deep/ .el-form-item .el-form-item__label{
        font-size:0.35rem!important;
        font-weight:700;
    }

    .infoForm /deep/ .el-form-item .el-form-item__content{
       font-size:0.35rem!important;
       color:#111;
    }

    .infoTop{
      width:100%;
      float:left;
      position: relative;
      text-align:left;
      padding:0;
      /* padding-left:1rem; */
      border-bottom: 1px dotted #ccc;
      height:1rem;
      line-height: 1rem;
      /* border:1px solid red; */
    }

    .infoTop /deep/ .el-form-item{
        height:1rem!important;
        line-height: 1rem!important;
    }

    .infoTop /deep/ .el-form-item .el-form-item__label{
        vertical-align: top;
        height:1rem!important;
        line-height: 1rem!important;
    }

    .onlineText{
       color:green;
    }

    .alarmText{
        color:red;
    }

    .locationIcon{
      display:inline-block;
      width:0.6rem;
      height:0.6rem;
      /* vertical-align: middle; */
      margin:0.2rem 0.2rem 0 0;
    }

    /* .onlineState,
    .offlineState{
      vertical-align: middle;
      -ms-transform: translateY(4px);
      -webkit-transform: translateY(4px);
      transform: translateY(4px);
    } */
    .onlineState,
    .offlineState,
    .singalIcon,
    .stopUse,
    .yes {
        vertical-align: middle;
        -ms-transform: translateY(4px);
        -webkit-transform: translateY(4px);
        transform: translateY(4px);
        margin-left: 0.1rem !important;
    }

    .singalIcon{
       width:0.5rem;
       height:0.5rem;
    }
</style>
